<template>
    <div class="sc-up-file">
        <el-upload 
            ref="upload" 
            :disabled="disabled" 
            :on-change="change" 
            :accept="accept" 
            :action="action" 
            :show-file-list="false" 
            :before-upload="before"
            :on-error="error" 
            :http-request="request"
            class="uploadbox"
        >
            <el-button type="primary" icon="lineicon icon-shexiangji" circle v-if="type == 'video'"></el-button>
            <el-button type="primary" icon="lineicon icon-shengyin" circle v-if="type == 'audio'"></el-button>
            <el-progress type="circle" v-if="isloading" :percentage="jindu" :show-text="false" :stroke-width="4" :width="44" style="position: absolute; left: -4px; top: -4px;"/>
        </el-upload>
        <el-tag size="mini" v-if="name || filename" @click="isprew ? prewFun() : ''"><i class="el-icon-loading" v-if="isloading"></i> {{filename}}</el-tag>
    </div>
</template>

<script>
import config from "@/config/upload"
import VOD from 'vod-js-sdk-v6'
export default {
    props: {
        modelValue: { type: String, default: "" },
        apiObj: { type: Object, default: () => {} },
        type: { type: String, default: "video" }, // video audio
        maxSize: { type: Number, default: config.fileSize },
        title: { type: String, default: "" },
        disabled: { type: Boolean, default: false },
        accept: { type: String, default: "video/mp4" },
        iscos: { type: Boolean, default: false },
        isvod: { type: Boolean, default: false },
        isprew: { type: Boolean, default: false },
        name: { type: String, default: '' },
        url: { type: String, default: '' },
    },
    data(){
        return {
            filename: '',
            isloading: false,
            jindu: 0
        }
    },
    mounted() {
        if (this.name) {
            this.filename = this.getFileName(this.name)
        }
    },
    methods: {
        change(){
            
        },
        before(){
            this.isloading = true
            this.$emit('progress', 1);
        },
        error(data){
            console.log(data)
        },
        async request(data){
            if(this.isvod){
                let res = await this.$HTTP.get('storage/vod-upload-signature')
                if(res.error == 0){
                    this.vodFun(data.file, res.data)
                    this.filename = data.file.name
                    this.$emit('update:name', this.filename)
                } else{
                    this.$message.error('上传失败')
                }
            }
        },
        vodFun(file, data){
            const TcVod = new VOD({
                getSignature: () => {
                    return data
                }
            })
            let uploader = TcVod.upload({
                mediaFile: file,
            })
            uploader.on('media_progress', (info) => {
                this.jindu = info.percent * 100
            })
            uploader.done().then((doneResult) => {
                this.$emit('update:modelValue', doneResult.fileId);
                this.isloading = false
                this.$emit('progress', 0);
            }).catch(function (err) {
                console.log(err)
            })
        },
        prewFun(){
            window.open(this.url)
        },
        getFileName(o) {
            var pos = o.lastIndexOf("/")
            return o.substring(pos+1); 
        },
    },
}
</script>

<style lang="scss" scoped>
.sc-up-file{display: flex; align-items: center;}
.uploadbox{margin-right: 10px;}
</style>